<template>
  <div class="message-panel">
    <div class="panel-title">实时消息</div>
    <div class="message-list">
      <div 
        v-for="message in messages" 
        :key="message.id"
        class="message-item"
        :class="message.type"
        @click="handleMessageClick(message)"
      >
        <div class="message-header">
          <div class="message-time">{{ message.time }}</div>
          <div class="message-type-badge" :class="message.type">
            {{ getTypeText(message.type) }}
          </div>
        </div>
        <div class="message-content">{{ message.content }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { MessageItem } from '../types'

interface Emits {
  (e: 'messageClick', message: MessageItem): void
}

const { messages } = defineProps<{
  messages: MessageItem[]
}>()
const emit = defineEmits<Emits>()

const handleMessageClick = (message: MessageItem) => {
  emit('messageClick', message)
}

const getTypeText = (type: MessageItem['type']) => {
  const typeMap = {
    'info': '信息',
    'warning': '警告',
    'success': '成功',
    'error': '错误'
  }
  return typeMap[type] || '未知'
}
</script>

<style scoped>
.message-panel {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 12px;
  padding: 15px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.panel-title {
  color: #00d4ff;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  text-align: center;
}

.message-list {
  flex: 1;
  overflow-y: auto;
}

.message-item {
  background: rgba(0, 212, 255, 0.05);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.message-item:hover {
  background: rgba(0, 212, 255, 0.1);
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.message-time {
  color: #00d4ff;
  font-size: 12px;
}

.message-type-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: bold;
}

.message-type-badge.info {
  background: rgba(0, 212, 255, 0.2);
  color: #00d4ff;
}

.message-type-badge.success {
  background: rgba(103, 224, 227, 0.2);
  color: #67e0e3;
}

.message-type-badge.warning {
  background: rgba(255, 217, 61, 0.2);
  color: #ffd93d;
}

.message-type-badge.error {
  background: rgba(255, 107, 107, 0.2);
  color: #ff6b6b;
}

.message-content {
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
}
</style>
